import { ref, computed, reactive } from 'vue'
import { defineStore } from 'pinia'
import {useRouter} from 'vue-router'
export const useComponents = defineStore('components', () => {
  const canvasComponents = ref<Array<any>>([])
  const currentComponent = ref(null)
  //把数组PUSH进去
  // iconPushComponents
  const iconPushComponents = (obj: any) => {
    canvasComponents.value.push(obj)
    console.log(canvasComponents, '数组')
  }
  const currentcom = ref<any>({})
  console.log(currentcom, 'qqqqq')

  //正在操作你要拖动组件
  const Operating = (id: string) => {
    const obj = canvasComponents.value.find((item) => item.id === id)
    currentcom.value = obj
    console.log((currentcom.value = obj), 'value')
  }
  //组件修改样式
  const setStyle = (id: string, key: string, value: string | number) => {
    console.log(id, value, key, '案管旗下')

    const obj = canvasComponents.value.find((item) => item.id === id)
    console.log(obj, '样式值')

    obj.style[key] = value
    console.log((obj.style[key] = value), '取值啊啊啊啊')
  }
  //清除画布
  const ClearPermeation = () => {
    canvasComponents.value = []
    canvasComponents.value.length = 0
  }
  //清除缓存
  const ClearHuancun = () => {
    localStorage.removeItem('setcanvasComponents')
  }
  //持久化处理
  const SetLocalStorage = (table: any) => {
    canvasComponents.value.push(...table)
  }
  //定义层级删除逻辑
  const  DeleteCao=(id:any)=>{
    console.log(id,"ID+ID=?");
    
     const  DeleteIndex=canvasComponents.value.findIndex((item)=>item.id===id);
     canvasComponents.value.splice( DeleteIndex, 1)
  }
  //导出是否显示动画列表组件
  const table=ref(false)
  //是否显示动画租金的方法
  const setIsanimate=(bool:boolean)=>{
    table.value=bool
  }
  //给当前组件设置动画事件
  const SetanimationeventsForthecurrentcomponent=(animate:any)=>{
    if(!currentcom.value.animate || !currentcom.value.animate.length){
      currentcom.value.animate=[]
    }
    const currentTargetAminate=currentcom.value.animate.find(
      (item:any)=>item.label===animate.label

    )
    if(!currentTargetAminate){
      currentcom.value.animate.push(animate)

    }
    (currentcom.value as {animate:string}).animate=animate
  }
  //我的页面编辑  
  const  PullEditWorks=(totable:any)=>{
    // console.log(EditObj_Data,"画布我编辑");
    
  canvasComponents.value.push(...totable)

  }

  const  XXXXXXXXX=(item:any)=>{
    console.log(item,"XXXXXXXXXXXXXXXXXXB");
   const res= canvasComponents.value.push(...item)
    console.log(res,"99999999996");
    
    
  }
  return {
    canvasComponents,
    currentComponent,
    currentcom,
    iconPushComponents,
    Operating,
    setStyle,
    ClearPermeation,
    SetLocalStorage,
    ClearHuancun,
    DeleteCao,
    table,
    setIsanimate,
    SetanimationeventsForthecurrentcomponent,
    PullEditWorks,
    XXXXXXXXX
  
  }
})
export default useComponents
